<template>
	<view class="page">
		<!-- 地址 -->
		<view class="address-data">
			<view class="address-list flex-box" v-if="addressInfor.mobile" @click="onSkip('address')">
				<view class="box-1">
					<view class="list">
						<text>{{addressInfor.province+addressInfor.city+addressInfor.district}}</text>
					</view>
					<view class="list">
						<text class="address">{{addressInfor.address}}</text>
					</view>
					<view class="list">
						<text>{{addressInfor.uname}}</text>
						<text>{{addressInfor.mobile}}</text>
					</view>
				</view>
				<u-icon name="arrow-right" size="24" color="#c5c5c5"></u-icon>
			</view>
			<view class="n-address" v-else>
				<view class="a-1 flex-box" @click="onSkip('address')">
					<view class="box-1">添加收货地址</view>
					<u-icon name="arrow-right" size="24" color="#c5c5c5"></u-icon>
				</view>
			</view>

			<view class="bar"></view>
		</view>
		<!-- 商品 -->
		<view class="goods-data">
			<view class="goods-title">
				<text>商品信息</text>
			</view>
			<view class="goods-list">
				<view class="list" v-for="(item,index) in goodsInfor.goods">
					<view class="thumb">
						<image :src="item.thumb" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="name one-omit">{{item.name}}</text>
							<text class="attr">{{item.spec}}</text>
						</view>
						<view class="price-number">
							<view class="price">
								<text>{{item.price0_text || ''}}</text>
								<text class="min">￥</text>
								<text class="max">{{item.price0}}</text>
								<!-- <text class="min">.00</text> -->
							</view>
							<view class="number">
								<text>x {{item.num}}</text>
							</view>
						</view>
						<!-- <view class="tag">
							<text>支持七天无理由退货</text>
						</view> -->
					</view>
				</view>
			</view>
			<view class="delivery">
				<div class="list">
					<view class="title">运费</view>
					<view class="content">
						<text>{{goodsInfor.freight_money>0?'￥'+goodsInfor.freight_money.toFixed(2):'包邮'}}</text>
						<!-- <text class="iconfont icon-more"></text> -->
					</view>
				</div>
				<!-- 	<div class="list">
					<view class="title">运费险</view>
					<view class="content">
						<text>￥10.00</text>
						<text class="iconfont icon-check"></text>
					</view>
				</div> -->
				<!-- 	<div class="list">
					<view class="title">留言</view>
					<view class="content">
						<input type="text" placeholder="选填,建议先和商家沟通确认">
					</view>
				</div> -->
			</view>
		</view>
		<!-- 优惠 -->
		<view class="discounts-data" v-if="charm_credit">
			<view class="discounts">
				<div class="list">
					<view class="title">魅力值 <text
							style="margin-left:10rpx;font-size:26rpx;">{{goodsInfor.points}}</text></view>
					<view class="content">
						<u-switch v-model="value" activeColor="#d0abf4" @change="changeSwitch"></u-switch>
					</view>
				</div>
			</view>
		</view>

		<!-- 订单金额 -->
		<view class="order-price">
			<view class="price-list">
				<view class="list">
					<view class="title">
						<text>商品金额</text>
					</view>
					<view class="price">
						<text>￥{{goodsInfor.total_price}}</text>
					</view>
				</view>
				<!-- 	<view class="list">
					<view class="title">
						<text>会员折扣</text>
					</view>
					<view class="price">
						<text>-￥19.00</text>
					</view>
				</view> -->
				<!-- <view class="list">
					<view class="title">
						<text>运费</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view> -->
				<!-- 	<view class="list">
					<view class="title">
						<text>运费险</text>
					</view>
					<view class="price">
						<text class="highlight">+￥0.00</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 支付方式列表 -->
		<view class="pay-way">
			<view class="pay-list">
				<view class="list" v-for="(item,index) in PayList" @click="onPayWay(item,index)" :key="index">
					<view class="pay-type">
						<image :src="item.icon" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="check">
						<text class="iconfont" :class="PayWay === index ? 'icon-checked action':'icon-check'"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 地址提示 -->
		<view class="address-tips" :style="scrollTop >= 100 ? '':'display:none'">
			<text>{{addressInfor.address}}</text>
		</view>
		<!-- 底部合计提交 -->
		<view class="footer-submit">
			<view class="price">
				<text class="min">￥</text>
				<text class="max" v-if="value">{{pointPay}}</text>
				<text class="max" v-else>{{goodsInfor.total_price.toFixed(2)}}</text>

				<!-- <text class="min">.00</text> -->
			</view>
			<view class="submit" @click="onSubmit">
				<text>确认支付</text>
			</view>
		</view>
		<!-- 发票 -->
		<invoice-info ref="InvoiceInfo"></invoice-info>
		<!-- 优惠券 -->
		<use-coupon ref="UseCoupon"></use-coupon>
		<number-jpan :length="6" @closeChange="closeChange($event)" :showNum="false" ref="numberPad"></number-jpan>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import InvoiceInfo from '../../components/InvoiceInfo/InvoiceInfo.vue';
	import UseCoupon from '../../components/UseCoupon/UseCoupon.vue'
	import numberJpan from "../../components/numberJpan/numberJpan.vue";
	export default {
		components: {
			// 发票
			InvoiceInfo,
			// 优惠券
			UseCoupon,
			numberJpan,
		},
		data() {
			return {
				PayList: [{
						icon: '/static/wx_pay.png',
						name: '微信支付',
					},
					// {
					// 	icon: '/static/zfb_pay.png',
					// 	name: '支付宝支付',
					// },{
					// 	icon: '/static/ye_pay.png',
					// 	name: '余额支付',
					// },
				],
				PayWay: 0,
				value: false,
				scrollTop: 0,
				addressInfor: {},
				goodsInfor: {},
				id: 0,
				showNum: true,
				par: null,
				is_cart: null,
				charm_credit: true,
				defaultTs: {

				},
				district_id: 0,
				buy_area: ''
			};
		},
		onLoad(options) {
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#ae87d8"
			})
			// this.goodsInfor = JSON.parse(decodeURIComponent(options.item))
			// this.type = options.type
			this.id = options.id
			this.par = options.par
			this.is_cart = options.isCart
			this.district_id = options.district_id;
			this.buy_area = options.buy_area;
			this.getGoodsDetails()
			// par=24:1&type=1&district_id=110101
		},
		onShow() {
			this.getAddress()
		},
		computed: {

			pointPay() {
				let price1 = 0;
				for (let i = 0; i < this.goodsInfor.goods.length; i++) {
					price1 += this.goodsInfor.goods[i].price * this.goodsInfor.goods[i].num
				}

				return (parseFloat(this.goodsInfor.points) >= price1 ? 0 : price1 - this.goodsInfor.points).toFixed(2)
				// goodsInfor.points>=goodsInfor.goods.price?0:(goodsInfor.goods.price-goodsInfor.points
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			closeChange(n) {
				let _this = this
				console.log(_this.par, _this.is_cart, '1111')
				uni.login({
					success: function(res) {
						//魅力值抵扣
						_this.$u.api.orderCreate({
								par: _this.par,
								address_id: _this.addressInfor.id,
								is_points: _this.value ? 1 : 0,
								pwd: n,
								code: res.code,
								is_cart: _this.is_cart
							})
							.then(res => {
								// console.log(res,'registerorder_create');
								let result = res.msg
								if (res.status) {
									// 支付成功的回调中 创建绘本馆成功
									uni.showToast({
										title: '支付成功',
										icon: 'none',
										duration: 3000,
										success() {
											// console.log('success')
											if (_this.goodsInfor.goods.flag == 'vip') {
												uni.redirectTo({
													url: '/pages/PayResult/PayResultSucc?item=' +
														2,
												})
											} else {
												uni.redirectTo({
													url: '/pages/PayResult/PayResultSucc',
												})
											}


										}
									});
								} else if (res.code == -4) {
									uni.showToast({
										title: res.msg,
										duration: 3000,
										success() {
											console.log('success')
											uni.redirectTo({
												url: '/pages/sub/Setting/change_pwd_pay',
											})

										}
									});
								} else if (res.code == -8) {
									uni.showModal({
										title: '温馨提醒',
										confirmText: "去填报",
										content: res.msg,
										success: res => {
											if (res.confirm) {
												uni.navigateTo({
													url: '/pages/sub/declare/declare',
												})
											}
										}
									})
									// uni.navigateTo({
									// 	url: '/pages/sub/declare/declare',
									// })
								} else if (res.code == -7) {
									//微信支付
									uni.requestPayment({
										provider: 'wxpay',
										timeStamp: res.msg.timeStamp, // 时间戳从1970年1月1日至今的秒数，即当前的时间
										nonceStr: res.msg.nonceStr, // 随机字符串，长度为32个字符以下
										package: res.msg
											.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
										signType: res.msg.signType, //签名算法，暂支持 MD5
										paySign: res.msg.paySign, // 签名
										success: function(res) {
											// 支付成功的回调中 创建绘本馆成功
											uni.showToast({
												title: '微信支付成功',
												icon: 'none',
												duration: 3000,
												success() {
													if (_this.goodsInfor.goods.flag ==
														'vip') {
														uni.redirectTo({
															url: '/pages/PayResult/PayResultSucc?item=' +
																2,
														})
													} else {
														uni.redirectTo({
															url: '/pages/PayResult/PayResultSucc',
														})
													}

												}
											});


										},
										fail: function(err) {
											// 支付失败的回调中 用户未付款
											uni.showToast({
												title: '支付取消',
												duration: 3000,
												image: '/static/png/error_icon.png',
												success: function() {
													uni.navigateBack()

												}
											});
										}
									});

								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}

							})
					}

				})

			},
			/**
			 * 支付方式切换点击
			 */
			onPayWay(item, index) {
				this.PayWay = index;
				this.PayPirce = `${item.name}￥299.00`
			},
			// 默认监听
			changeSwitch(value) {
				console.log(value)
			},
			getGoodsDetails() {
				this.$u.api.orderPre({
						par: this.par
					}).then(res => {
						if (res.status) {
							this.goodsInfor = res.msg
							res.msg.goods.forEach((item) => {
								if (item.trade_type === '1101') {
									//保税产品
									this.charm_credit = false
								}
							});
							console.log(this.goodsInfor)
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			// 获取默认地址
			getAddress() {
				this.$u.api.addressMess().then(res => {
						if (res.status) {
							this.addressInfor = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			/**
			 * 提交订单
			 */
			onSubmit() {
				let _this = this
				// console.log(this.par,'++++++')
				// return false
				if (!this.value || this.value && this.pointPay > 0) {
					uni.requestSubscribeMessage({
						tmplIds: [
                'gJX2dbzFtaUUknhtMVH3wrP606CZl_1OIHnWv3itU3M',
							  'CBZRv2ZS6CAkGl11hihyqN4Y_aixiInAYepbxntCKtA'
						],
						complete: (obj) => {
							uni.login({
								success: function(res) {
									/* console.log(typeof _this.addressInfor.district_id )
									 console.log(typeof _this.district_id)*/
									if (_this.addressInfor.district_id !== parseInt(_this
											.district_id)) {
										uni.showToast({
											title: "收货地址须为下单时所选地区\n：" + _this.buy_area,
											icon: 'error',
											duration: 3000
										});
										return;
									}

									//微信支付
									_this.$u.api.orderCreate({
											par: _this.par,
											num: 1,
											address_id: _this.addressInfor.id,
											is_points: _this.value ? 1 : 0,
											code: res.code,
											is_cart: _this.is_cart
										})
										.then(res => {
											console.log(res, 'registerorder_create');
											let result = res.msg
											if (res.status) {
												// 支付成功的回调中 创建绘本馆成功
												uni.showToast({
													title: '支付成功',
													icon: 'success',
													duration: 3000,
													success() {
														// console.log('success')
														if (_this.goodsInfor.goods
															.flag == 'vip') {
															uni.redirectTo({
																url: '/pages/PayResult/PayResultSucc?item=' +
																	2,
															})
														} else {
															uni.redirectTo({
																url: '/pages/PayResult/PayResultSucc',
															})
														}

													}
												});
											} else if (res.code == -4) {
												uni.showToast({
													title: res.msg,
													duration: 3000,
													success() {
														console.log('success')
														uni.redirectTo({
															url: '/pages/sub/Setting/change_pwd_pay',
														})

													}
												});
											} else if (res.code == -8) {
												uni.showModal({
													title: '温馨提醒',
													confirmText: "去填报",
													content: res.msg,
													success: res => {
														if (res.confirm) {
															uni.navigateTo({
																url: '/pages/sub/declare/declare',
															})
														}
													}
												})
											} else if (res.code == -7) {
												//微信支付
												uni.requestPayment({
													provider: 'wxpay',
													timeStamp: res.msg
														.timeStamp, // 时间戳从1970年1月1日至今的秒数，即当前的时间
													nonceStr: res.msg
														.nonceStr, // 随机字符串，长度为32个字符以下
													package: res.msg
														.package, // 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
													signType: res.msg
														.signType, //签名算法，暂支持 MD5
													paySign: res.msg.paySign, // 签名
													success: function(res) {
														// 支付成功的回调中 创建绘本馆成功
														uni.showToast({
															title: '微信支付成功',
															icon: 'success',
															duration: 2000,
															success() {
																if (_this
																	.goodsInfor
																	.goods
																	.flag ==
																	'vip'
																) {
																	uni.redirectTo({
																		url: '/pages/PayResult/PayResultSucc?item=' +
																			2,
																	})
																} else {
																	uni.redirectTo({
																		url: '/pages/PayResult/PayResultSucc',
																	})
																}

															}
														});


													},
													fail: function(err) {
														// 支付失败的回调中 用户未付款
														uni.showToast({
															title: '支付取消',
															duration: 2000,
															image: '/static/png/error_icon.png',
															success: function() {
																uni.navigateBack()

															}
														});
													}
												});

											} else {
												uni.showToast({
													title: res.msg,
													icon: 'none'
												})
											}

										})
								}

							})


						}
					})
				} else {
					this.$refs.numberPad.open()
					return false
				}
				// uni.redirectTo({
				// 	url: '/pages/CashierDesk/CashierDesk',
				// })
			},
			/**
			 * 跳转点击
			 * @param {String} type 跳转类型
			 */
			onSkip(type) {
				switch (type) {
					case 'address':
						uni.navigateTo({
							url: '/pages/sub/AddressList/AddressList',
						})
						break;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'ConfirmOrder.scss';
	@import 'CashierDesk.scss';
</style>